<script setup>
import {ref} from 'vue'

</script>


<template>
  <div class="viewport">
    <div class="logo">
      <image
        src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/logo_icon.png"
      />
    </div>
    <div class="login">
      <button class="button phone"><text class="icon icon-phone"></text>手机号快捷登录</button>
    </div>

    <!-- 文字 -->
     <div class="extra">
      <view class="caption"><text>其他登录方式</text></view>
      <view> <button><text class="icon icon-phone">模拟快捷登录</text></button></view>
     </div>

    <!-- tip -->
     <div class="tips">>登录/注册即视为你同意《服务条款》和《小兔鲜儿隐私协议》</div>

  </div>
</template>

<style scoped lang="scss">
page{
  height: 100%;
}

.viewport{
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20rpx 40rpx;
  // align-items: center;
  
  .logo{
    flex: 1;
    text-align: center;
     image{
      width: 220rpx;
      height: 220rpx;
      margin-top: 15vh;
     }
  }
  .login{
    display: flex;
    flex-direction: column;
    height: 60vh;
    .button{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 80rpx;
      border-radius: 40rpx;
      border: 0;
      font-size: 28rpx;
      color: white;
    }

  }

  .extra{
    flex:1;
    padding: 70rpx 70rpx 0px;
    .caption{
      width: 440rpx;
      line-height: 1;
      border-top: 1rpx solid #ddd;
      font-size: 26rpx;
      color:#999;
    }

  }

  .phone {
    background-color: #28bb9c;
  }
}

</style>